<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
  <head>
      <meta charset="UTF-8">
      <title>组件化编程-全局组件</title>
  </head>
  <body>
  <div id="app">
    <h1>组件化编程-全局组件</h1>
<!--    使用全局组件-->
    <counter></counter><br/>
    <counter></counter>
  </div>

  <div id="app2">
    <h1>组件化编程-全局组件-app2</h1>
    <counter></counter><br/>
    <counter></counter>
  </div>

  <script src="vue.js"></script>
  <script type="text/javascript">
    /*
      1.定义一个全局组件,名称为counter
      2.{}表示组件相关的内容,是一个对象
      3.template 指定该组件的界面,因为会引用到数据池的数据,所以需要使用模板字符串
      4.要把组件视为一个Vue实例,夜有自己的数据池和方法池
      5.对于组件,数据池的数据是使用函数/方法返回 不能使用原先的方式,目的是为了保证每个组件数据独立
      6.方法共享,数据不共享(因为数据是以return的形式返回)
      7.全局组件是属于所有Vue实例,因此可以在所有的vue中使用
     */
    Vue.component("counter",{
      template:`<button v-on:click="click()">点击次数={{count}}(全局组件化方式)</button><br/>`,
      data() {
        return{
          count:0
        }
      },
      methods:{
        click() {
          this.count++;
        }
      }
    })

    let vm = new Vue({
      el:"#app"
    })

    let vm2 = new Vue({
      el:"#app2"
    })
  </script>
  </body>
</html>